<template>
    <div>
        <h1>第一题 css实现当鼠标悬停在图片上时，图片放大1.1倍并在图片上产生一个透明灰色遮罩，需要平滑变化效果。</h1>
    <div class="image-container">
        <img src="../../public/test.png" alt="" />
        <div class="overlay"></div>
    </div>
    </div>
</template>
<script>
export default {
  name: "ImageCss"
};
</script>
<style scoped>
.image-container {
  width: 500px; 
  margin: auto;
}

.image-container img {
  width: 100%;
}
 
</style>